<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>权限-左右移入移除</title>
<link rel="stylesheet" href="css/base.css" />
<style>
	.box1{width:250px; height: 240px; border: 1px solid black; float: left; overflow-y: auto; overflow: hidden;}
	.box1 select{position: absolute; left:-100px}
	.seldiv ul li{line-height: 30px; border-bottom: 1px solid #ccc; text-indent: 10px; cursor: pointer;}
	.box2{width:250px; height: 240px; border: 1px solid black; float: left; margin-left: 40px; overflow-y: auto;}
	.box2 ul li{line-height: 30px; border-bottom: 1px solid #ccc; text-indent: 10px;  cursor: pointer;}
	
	
	
</style>
</head>
<body>
<div class="wrap">
	<h2 class="wrap-h2">javascript 权限-左右移入移除！</h2>
	<div class="wrap-main">
		<!--原 start-->
		<div class="box1" id="box1">
			<select id="selbox">
				<option>aaa</option>
				<option>222</option>
				<option>ccc</option>
				<option>4</option>
				<option>ddd</option>
				<option>6</option>
			</select>
			<div class="seldiv">
				<ul id="uldiv">
					
				</ul>
			</div>
		</div>
		<!--原 end-->
		<!--new start-->
		<div class="box2" id="box2">
			<ul id="uldiv2">
				
			</ul>
		</ul>
		<!--new end-->
	</div>
</div>
<script>
	window.onload = function ()
	{
		var box1 = document.getElementById("box1");
		var box2 = document.getElementById("box2");
		var uldiv = document.getElementById("uldiv");
		var uldiv2 = document.getElementById("uldiv2");
		var selbox = document.getElementById("selbox");
		var selopt = selbox.getElementsByTagName("option");
		
		for (var i=0; i<selopt.length; i++)
		{
			var h = selopt[i].textContent;
			var li = document.createElement("li");
			var textnode =document.createTextNode(selopt[i].value);
			li.appendChild(textnode);
			uldiv.appendChild(li);
		}
		
		var oLi = uldiv.getElementsByTagName("li");
		console.log(oLi.length);
		
		for(var i=0; i<oLi.length; i++)
		{
			var oNewLi = uldiv2.getElementsByTagName("li");
			oLi[i].index = i;
			oLi[i].onclick = function ()
			{
				console.log(oLi[this.index].innerHTML);
				oLi[this.index].style.display = "none";
				
				var newli = document.createElement("li");
				var newtextnode =document.createTextNode(oLi[this.index].innerHTML);
				newli.appendChild(newtextnode);
				uldiv2.appendChild(newli);
				
				
				for(var r=0; r<oNewLi.length; r++)
				{
					oNewLi[r].index = r;
					oNewLi[r].onclick = function ()
					{
						console.log(oNewLi[this.index].innerHTML);
						oNewLi[this.index].style.display = "none";
						oLi[this.index].style.display = "block";
						
					}
				}
				
			}
			
			
			
		}
		
		
		
		
		
	}
</script>
</body>
</html>
